JavaScript Async-Iterator-Helfer: Scan - Asynchrone akkumulative Verarbeitung

Asynchrone Programmierung ist ein Eckpfeiler der modernen JavaScript-Entwicklung, insbesondere beim Umgang mit I/O-gebundenen Operationen wie Netzwerkanfragen oder Dateisysteminteraktionen. Asynchrone Iteratoren, eingeführt in ES2018, bieten einen leistungsstarken Mechanismus zur Verarbeitung von Strömen asynchroner Daten. Der `scan`-Helfer, der oft in Bibliotheken wie RxJS zu finden ist und zunehmend als eigenständiges Dienstprogramm verfügbar wird, eröffnet noch mehr Potenzial für die Verarbeitung dieser asynchronen Datenströme.

Verständnis von Async-Iteratoren

Bevor wir uns mit `scan` befassen, lassen Sie uns rekapitulieren, was Async-Iteratoren sind. Ein Async-Iterator ist ein Objekt, das dem Async-Iterator-Protokoll entspricht. Dieses Protokoll definiert eine `next()`-Methode, die ein Promise zurückgibt, das zu einem Objekt mit zwei Eigenschaften aufgelöst wird: `value` (der nächste Wert in der Sequenz) und `done` (ein boolescher Wert, der anzeigt, ob der Iterator beendet ist). Async-Iteratoren sind besonders nützlich, wenn mit Daten gearbeitet wird, die im Laufe der Zeit eintreffen, oder mit Daten, die asynchrone Operationen zum Abrufen erfordern.

Hier ist ein grundlegendes Beispiel für einen Async-Iterator:

            
async function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

async function main() {
  const iterator = generateNumbers();

  let result = await iterator.next();
  console.log(result); // { value: 1, done: false }

  result = await iterator.next();
  console.log(result); // { value: 2, done: false }

  result = await iterator.next();
  console.log(result); // { value: 3, done: false }

  result = await iterator.next();
  console.log(result); // { value: undefined, done: true }
}

main();

            

              
                Copy
              
            
          

Einführung in den `scan`-Helfer

Der `scan`-Helfer (auch bekannt als `accumulate` oder `reduce`) transformiert einen Async-Iterator, indem er eine Akkumulatorfunktion auf jeden Wert anwendet und das akkumulierte Ergebnis ausgibt. Dies ist analog zur `reduce`-Methode bei Arrays, funktioniert aber asynchron und auf Iteratoren.

Im Wesentlichen nimmt `scan` einen Async-Iterator, eine Akkumulatorfunktion und einen optionalen Anfangswert entgegen. Für jeden vom Quell-Iterator ausgegebenen Wert wird die Akkumulatorfunktion mit dem vorherigen akkumulierten Wert (oder dem Anfangswert, falls es die erste Iteration ist) und dem aktuellen Wert aus dem Iterator aufgerufen. Das Ergebnis der Akkumulatorfunktion wird zum nächsten akkumulierten Wert, der dann vom resultierenden Async-Iterator ausgegeben wird.

Syntax und Parameter

Die allgemeine Syntax für die Verwendung von `scan` lautet wie folgt:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  for await (const value of sourceIterator) {
    accumulatedValue = accumulator(accumulatedValue, value);
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

• `sourceIterator`: Der zu transformierende Async-Iterator.
• `accumulator`: Eine Funktion, die zwei Argumente entgegennimmt: den vorherigen akkumulierten Wert und den aktuellen Wert aus dem Iterator. Sie sollte den neuen akkumulierten Wert zurückgeben.
• `initialValue` (optional): Der Anfangswert für den Akkumulator. Wenn nicht angegeben, wird der erste Wert aus dem Quell-Iterator als Anfangswert verwendet und die Akkumulatorfunktion wird ab dem zweiten Wert aufgerufen.

Anwendungsfälle und Beispiele

Der `scan`-Helfer ist unglaublich vielseitig und kann in einer Vielzahl von Szenarien mit asynchronen Datenströmen eingesetzt werden. Hier sind einige Beispiele:

1. Berechnung einer laufenden Summe

Stellen Sie sich vor, Sie haben einen Async-Iterator, der Transaktionsbeträge ausgibt. Sie können `scan` verwenden, um eine laufende Summe dieser Transaktionen zu berechnen.

            
async function* generateTransactions() {
  yield 10;
  yield 20;
  yield 30;
}

async function main() {
  const transactions = generateTransactions();
  const runningTotals = scan(transactions, (acc, value) => acc + value, 0);

  for await (const total of runningTotals) {
    console.log(total); // Ausgabe: 10, 30, 60
  }
}

main();

            

              
                Copy
              
            
          

In diesem Beispiel addiert die `accumulator`-Funktion einfach den aktuellen Transaktionsbetrag zur vorherigen Summe. Der `initialValue` von 0 stellt sicher, dass die laufende Summe bei Null beginnt.

2. Sammeln von Daten in einem Array

Sie können `scan` verwenden, um Daten aus einem Async-Iterator in einem Array zu sammeln. Dies kann nützlich sein, um Daten im Laufe der Zeit zu erfassen und in Stapeln zu verarbeiten.

            
async function* fetchData() {
  yield { id: 1, name: 'Alice' };
  yield { id: 2, name: 'Bob' };
  yield { id: 3, name: 'Charlie' };
}

async function main() {
  const dataStream = fetchData();
  const accumulatedData = scan(dataStream, (acc, value) => [...acc, value], []);

  for await (const data of accumulatedData) {
    console.log(data); // Ausgabe: [{id: 1, name: 'Alice'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]
  }
}

main();

            

              
                Copy
              
            
          

Hier verwendet die `accumulator`-Funktion den Spread-Operator (`...`), um ein neues Array zu erstellen, das alle vorherigen Elemente und den aktuellen Wert enthält. Der `initialValue` ist ein leeres Array.

3. Implementierung eines Rate Limiters

Ein komplexerer Anwendungsfall ist die Implementierung eines Rate Limiters. Sie können `scan` verwenden, um die Anzahl der Anfragen innerhalb eines bestimmten Zeitfensters zu verfolgen und nachfolgende Anfragen zu verzögern, wenn das Ratenlimit überschritten wird.

            
async function* generateRequests() {
  // Simulieren eingehender Anfragen
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 200));
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 100));
  yield Date.now();
}

async function main() {
  const requests = generateRequests();
  const rateLimitWindow = 1000; // 1 Sekunde
  const maxRequestsPerWindow = 2;

  async function* rateLimitedRequests(source, window, maxRequests) {
    let queue = [];
    for await (const requestTime of source) {
      queue.push(requestTime);
      queue = queue.filter(t => requestTime - t < window);

      if (queue.length > maxRequests) {
        const earliestRequest = queue[0];
        const delay = window - (requestTime - earliestRequest);
        console.log(`Rate limit exceeded. Delaying for ${delay}ms`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
      yield requestTime;
    }
  }

  const limited = rateLimitedRequests(requests, rateLimitWindow, maxRequestsPerWindow);

  for await (const requestTime of limited) {
    console.log(`Request processed at ${requestTime}`);
  }
}

main();

            

              
                Copy
              
            
          

Dieses Beispiel verwendet `scan` intern (in der `rateLimitedRequests`-Funktion), um eine Warteschlange von Anfrage-Zeitstempeln zu pflegen. Es prüft, ob die Anzahl der Anfragen innerhalb des Ratenlimit-Fensters das erlaubte Maximum überschreitet. Wenn ja, berechnet es die notwendige Verzögerung und pausiert, bevor die Anfrage weitergegeben wird.

4. Erstellen eines Echtzeit-Datenaggregators (Globales Beispiel)

Betrachten wir eine globale Finanzanwendung, die Echtzeit-Aktienkurse von verschiedenen Börsen aggregieren muss. Ein Async-Iterator könnte Preisaktualisierungen von Börsen wie der New York Stock Exchange (NYSE), der London Stock Exchange (LSE) und der Tokyo Stock Exchange (TSE) streamen. `scan` kann verwendet werden, um einen laufenden Durchschnitt oder den Höchst-/Tiefstpreis für eine bestimmte Aktie über alle Börsen hinweg zu pflegen.

            
// Simulieren des Streamings von Aktienkursen von verschiedenen Börsen
async function* generateStockPrices() {
  yield { exchange: 'NYSE', symbol: 'AAPL', price: 170.50 };
  yield { exchange: 'LSE', symbol: 'AAPL', price: 170.75 };
  await new Promise(resolve => setTimeout(resolve, 50));
  yield { exchange: 'TSE', symbol: 'AAPL', price: 170.60 };
}

async function main() {
  const stockPrices = generateStockPrices();

  // Verwenden Sie scan, um einen laufenden Durchschnittspreis zu berechnen
  const runningAverages = scan(
    stockPrices,
    (acc, priceUpdate) => {
      const { total, count } = acc;
      return { total: total + priceUpdate.price, count: count + 1 };
    },
    { total: 0, count: 0 }
  );

  for await (const averageData of runningAverages) {
    const averagePrice = averageData.total / averageData.count;
    console.log(`Laufender Durchschnittspreis: ${averagePrice.toFixed(2)}`);
  }
}

main();

            

              
                Copy
              
            
          

In diesem Beispiel berechnet die `accumulator`-Funktion die laufende Summe der Preise und die Anzahl der erhaltenen Aktualisierungen. Der endgültige Durchschnittspreis wird dann aus diesen akkumulierten Werten berechnet. Dies bietet eine Echtzeitansicht des Aktienkurses über verschiedene globale Märkte hinweg.

5. Globale Analyse des Website-Traffics

Stellen Sie sich eine globale Webanalyse-Plattform vor, die Ströme von Website-Besuchsdaten von Servern auf der ganzen Welt empfängt. Jeder Datenpunkt repräsentiert einen Benutzer, der die Website besucht. Mit `scan` können wir den Trend der Seitenaufrufe pro Land in Echtzeit analysieren. Nehmen wir an, die Daten sehen so aus: `{ country: "US", page: "homepage", timestamp: 1678886400 }`.

            
async function* generateWebsiteVisits() {
  yield { country: 'US', page: 'homepage', timestamp: Date.now() };
  yield { country: 'CA', page: 'product', timestamp: Date.now() };
  yield { country: 'UK', page: 'blog', timestamp: Date.now() };
  yield { country: 'US', page: 'product', timestamp: Date.now() };
}

async function main() {
  const visitStream = generateWebsiteVisits();

  const pageViewCounts = scan(
    visitStream,
    (acc, visit) => {
      const { country } = visit;
      const newAcc = { ...acc };
      newAcc[country] = (newAcc[country] || 0) + 1;
      return newAcc;
    },
    {}
  );

  for await (const counts of pageViewCounts) {
    console.log('Seitenaufrufe nach Land:', counts);
  }
}

main();

            

              
                Copy
              
            
          

Hier aktualisiert die `accumulator`-Funktion einen Zähler für jedes Land. Die Ausgabe würde die akkumulierenden Seitenaufrufe für jedes Land anzeigen, sobald neue Besuchsdaten eintreffen.

Vorteile der Verwendung von `scan`

Der `scan`-Helfer bietet mehrere Vorteile bei der Arbeit mit asynchronen Datenströmen:

• Deklarativer Stil: `scan` ermöglicht es Ihnen, akkumulative Verarbeitungslogik auf eine deklarative und prägnante Weise auszudrücken, was die Lesbarkeit und Wartbarkeit des Codes verbessert.
• Asynchrone Handhabung: Es behandelt nahtlos asynchrone Operationen innerhalb der Akkumulatorfunktion und eignet sich daher für komplexe Szenarien mit I/O-gebundenen Aufgaben.
• Echtzeitverarbeitung: `scan` ermöglicht die Echtzeitverarbeitung von Datenströmen, sodass Sie auf Änderungen reagieren können, sobald sie auftreten.
• Komponierbarkeit: Es kann leicht mit anderen Async-Iterator-Helfern kombiniert werden, um komplexe Datenverarbeitungspipelines zu erstellen.

Implementierung von `scan` (falls nicht verfügbar)

Obwohl einige Bibliotheken einen integrierten `scan`-Helfer bereitstellen, können Sie bei Bedarf leicht Ihren eigenen implementieren. Hier ist eine einfache Implementierung:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  let first = true;
  for await (const value of sourceIterator) {
    if (first && initialValue === undefined) {
      accumulatedValue = value;
      first = false;
    } else {
      accumulatedValue = accumulator(accumulatedValue, value);
    }
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

Diese Implementierung iteriert über den Quell-Iterator und wendet die Akkumulatorfunktion auf jeden Wert an, wobei das akkumulierte Ergebnis ausgegeben wird. Sie behandelt den Fall, dass kein `initialValue` bereitgestellt wird, indem sie den ersten Wert aus dem Quell-Iterator als Anfangswert verwendet.

Vergleich mit `reduce`

Es ist wichtig, `scan` von `reduce` zu unterscheiden. Obwohl beide auf Iteratoren arbeiten und eine Akkumulatorfunktion verwenden, unterscheiden sie sich in ihrem Verhalten und ihrer Ausgabe.

• `scan` gibt den akkumulierten Wert für jede Iteration aus und bietet so eine laufende Historie der Akkumulation.
• `reduce` gibt nur den endgültigen akkumulierten Wert nach der Verarbeitung aller Elemente im Iterator aus.

Daher eignet sich `scan` für Szenarien, in denen Sie die Zwischenzustände der Akkumulation verfolgen müssen, während `reduce` geeignet ist, wenn Sie nur das Endergebnis benötigen.

Fehlerbehandlung

Bei der Arbeit mit asynchronen Iteratoren und `scan` ist es entscheidend, Fehler elegant zu behandeln. Fehler können während des Iterationsprozesses oder innerhalb der Akkumulatorfunktion auftreten. Sie können `try...catch`-Blöcke verwenden, um diese Fehler abzufangen und zu behandeln.

            
async function* generatePotentiallyFailingData() {
  yield 1;
  yield 2;
  throw new Error('Something went wrong!');
  yield 3;
}

async function main() {
  const dataStream = generatePotentiallyFailingData();

  try {
    const accumulatedData = scan(dataStream, (acc, value) => acc + value, 0);

    for await (const data of accumulatedData) {
      console.log(data);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

main();

            

              
                Copy
              
            
          

In diesem Beispiel fängt der `try...catch`-Block den Fehler ab, der vom `generatePotentiallyFailingData`-Iterator geworfen wird. Sie können den Fehler dann entsprechend behandeln, z. B. indem Sie ihn protokollieren oder die Operation wiederholen.

Fazit

Der `scan`-Helfer ist ein leistungsstarkes Werkzeug zur Durchführung asynchroner akkumulativer Verarbeitung auf JavaScript Async-Iteratoren. Er ermöglicht es Ihnen, komplexe Datentransformationen auf eine deklarative und prägnante Weise auszudrücken, asynchrone Operationen elegant zu handhaben und Datenströme in Echtzeit zu verarbeiten. Durch das Verständnis seiner Funktionalität und Anwendungsfälle können Sie `scan` nutzen, um robustere und effizientere asynchrone Anwendungen zu erstellen. Ob Sie laufende Summen berechnen, Daten in Arrays sammeln, Ratenbegrenzer implementieren oder Echtzeit-Datenaggregatoren erstellen – `scan` kann Ihren Code vereinfachen und seine Gesamtleistung verbessern. Denken Sie daran, die Fehlerbehandlung zu berücksichtigen und `scan` anstelle von `reduce` zu wählen, wenn Sie während der Verarbeitung Ihrer asynchronen Datenströme auf zwischenzeitlich akkumulierte Werte zugreifen müssen. Die Erkundung von Bibliotheken wie RxJS kann Ihr Verständnis und Ihre praktische Anwendung von `scan` im Rahmen reaktiver Programmierparadigmen weiter vertiefen.